<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DotDashAcademy - Learn 'A'</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #121212; color: #FFFFFF; margin: 0; padding: 20px; display: flex; flex-direction: column; height: 90vh; }
        .top-bar { display: flex; justify-content: space-between; align-items: center; }
        .top-bar a { color: #00BFFF; text-decoration: none; font-size: 16px; }
        .content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .morph-container { width: 250px; height: 250px; background-color: #1E1E1E; border-radius: 20px; display: flex; justify-content: center; align-items: center; /* In Flutter, this would be a custom painter or animation */ }
        .morph-character { font-size: 150px; font-weight: bold; position: relative; color: #555; }
        .dot { position: absolute; top: 10px; left: 45%; width: 20px; height: 20px; background-color: #00BFFF; border-radius: 50%; }
        .dash { position: absolute; top: 50%; left: 25%; width: 50%; height: 15px; background-color: #00BFFF; border-radius: 8px; }
        .morse-code { font-size: 40px; letter-spacing: 5px; margin-top: 20px; font-family: monospace; }
        .actions { display: flex; gap: 20px; margin-top: 40px; }
        .action-btn { background-color: #1E1E1E; border: none; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 28px; }
        .play-btn { background-color: #00BFFF; color: #FFFFFF; }
        .bottom-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; }
        .nav-btn { background: none; border: none; color: #AAAAAA; font-size: 24px; }
        .nav-btn.main { color: #FFFFFF; font-size: 18px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="top-bar">
        ← Back to Levels
        <span>Level 1: 5/6</span>
    </div>

    <div class="content">
        <div class="morph-container">
            <div class="morph-character">
                A
                <div class="dot"></div>
                <div class="dash"></div>
            </div>
        </div>
        <p class="morse-code">·−</p >
        <div class="actions">
            <button class="action-btn">⏪</button>
            <button class="action-btn play-btn">▶</button>
            <button class="action-btn">⏩</button>
        </div>
    </div>
    
    <div class="bottom-nav">
       <button class="nav-btn">PREV</button>
       Mark as Mastered
       <button class="nav-btn">NEXT</button>
    </div>

</body>
</html>